<template>
  <div style="display: flex">
    <el-main>
      <div class="container" style="display: block;min-height: 500px;">
        <div class="toolbar" style=";display: flex;align-self:center ;align-items: center;justify-content:space-between">
          <div class="branch-control" style="margin-left: 140px;align-self: flex-start;display: flex;align-items: center;">
            <div class="branch-box">
              <el-select v-model="targetbranchName" class="m-2" placeholder="目标" style="width:90px">
                <el-option
                    v-for="item in branchList"
                    :key="item.branchName"
                    :label="item.branchName"
                    :value="item.branchName"
                />
              </el-select>
            </div>
            <div style="margin-left: 10px " >
              <el-link style="transition:.5s" @click="IntoBranch">
                <el-icon><Share/></el-icon>
                分支
              </el-link>
            </div>
          </div>
          <div class="file-control" style="margin-right: 140px;align-self: flex-end;display: flex;align-items: center;">
            <div class="file-control-item" style="padding-left:10px ;padding-right:10px ">
              <el-button type="primary" @click="Back">
                <el-icon class="el-icon--left"><Back /></el-icon>
                返回
              </el-button>
            </div>
            <div class="file-control-item" style="padding-left:10px ;padding-right:10px" >
              <el-button type="primary" @click="DownloadBranch">
                克隆/下载<el-icon class="el-icon--right"><Download /></el-icon>
              </el-button>
            </div>
            <div class="file-control-item" style="padding-left:10px ;padding-right:10px">
              <el-button type="primary" @click="CommitText">
                上传文件<el-icon class="el-icon--right"><Upload /></el-icon>
              </el-button>
            </div>
          </div>
        </div>
        <div class="preview" style="display: block;margin-top: -5px">
          <div style="display: flex;align-content: center;justify-content: center">
            <div style="width: 800px;border: 1px solid #e3e9ed;border-radius: 3px;margin-top: 20px;min-height: 35px;border-bottom: transparent;display: block">
              <div style="border-bottom: 1px solid #e3e9ed;height: 30px;background: #f6f6f6" />
              <div v-if="tableData!=null" v-for="item in tableData" class="pull-menu-view-item" style="display: block;">
                <div style="display: flex;align-items: center;border-bottom: 1px solid #e3e9ed;height: 35px ">
                  <div v-if="item.isDirectory===true" style="display: flex;padding: 10px">
                    <div>
                      <el-icon><Folder /></el-icon>
                    </div>
                    <el-link @click="Next(item.folderName,item.isDirectory)" style="margin-left: 5px">
                      {{item.folderName}}
                    </el-link>

                  </div>
                  <div v-else style="display: flex;padding: 10px">
                    <div>
                      <el-icon><Document /></el-icon>
                    </div>
                    <el-link style="margin-left: 5px" @click="Next(item.folderName,item.isDirectory)" >
                      {{item.folderName}}
                    </el-link>
                  </div>
                </div>
              </div>
              <div v-else style="height: 35px">暂无文件</div>
            </div>

          </div>
        <div  style="display: flex;align-content: center;justify-content: center">
          <div v-if="isDirectoryNow===false" style="width: 800px;border: 1px solid #e3e9ed;border-radius: 3px;margin-top: 20px;min-height: 400px;display: block">
            <div style="border-bottom: 1px solid #e3e9ed;height: 30px;background: #f6f6f6;display: flex;align-items: center" >
              <div style="padding-left: 10px;padding-right: 10px" >
                <el-icon><Folder /></el-icon>
              </div>
              {{fileName}}
            </div>
            <div style="display:flex;align-items: start;padding: 5px">
              <highlightjs autodetect :code="code" style="text-align: left"/>
            </div>
          </div>
        </div>
      </div>
      </div>
    </el-main>
    <el-aside  width="400px">
      <div style="display: block ;">
        <div style="display: block;align-items: start;padding: 20px;">
          <div style="display: flex;justify-content: start">
            简介
          </div>
          <div style="display: block;max-width: 300px;justify-content: start">
            <div  v-html="repoIntroduction" class="content" />
          </div>
        </div>
        <div style="display: block;padding: 20px">
          <div style="display: flex;width: 300px;justify-content: start;border-top: 2px solid #dcdfe6;padding-top: 10px ">
            <div style="font-weight: bold;font-size: 20px">
              发行版
            </div>
            <el-link v-if="this.isManager===true" @click="this.$router.push('../releases/new')" style="font-size: 10px;margin-left: 10px">
              创建
            </el-link>
            <el-link @click="this.$router.push('../releases')" style="color: #8c92a4;margin-left: 100px" type="info" :underline="false">
              全部
            </el-link>
          </div>
          <div style="display: flex;border-bottom: 1px solid #dcdfe6;width: 300px;margin-top: 15px;padding: 20px;padding-left: 0px">
            <div>
              <el-icon>
                <Ticket />
              </el-icon>
            </div>
            <el-link @click="this.$router.push('../releases')" style="height: 20px;display: flex;justify-content: start;margin-left: 10px" :underline="false"> {{newRelease.tagTitle}}</el-link>
          </div>
        </div>
        <div>
          <el-link style="text-align: left" @click="EnterCode">统计代码</el-link>
        </div>
      </div>
    </el-aside>
  </div>
</template>

<script>
import request from "@/utils/request";
import hljsVuePlugin from "@highlightjs/vue-plugin";
import download from "downloadjs";
import {Folder,Document,Share,Upload,Download,Back,Ticket} from "@element-plus/icons-vue"
import Branches from "@/views/Branches";
export default {
  name: "DisplayFolder",
  components:{
    Branches,
    highlightjs:hljsVuePlugin.component,
    Folder,
    Document,
    Share,
    Upload,
    Download,
    Back,
    Ticket
  },
  created(){
    this.userId=sessionStorage.getItem("userId")
    this.repoName=this.$route.params.repoName
    this.ownerName=this.$route.params.userName
    this.getBranchList()
    return this.load()
  },
  update(){
    this.load()
  },
  methods:{
    getBranchList(){
      let url='/'+sessionStorage.getItem("userName")+'/'+sessionStorage.getItem("repoName")+'/branches'
      request.get(url).then(res => {
        console.log(res)
        this.branchList = res.data
      })
    },
    EnterCode(){
      this.$router.push({
        path:'/'+sessionStorage.getItem("userName")+'/'+sessionStorage.getItem("repoName")+"/code/master"
      })
    },
    IntoBranch(){
      this.$router.push({
        path:'/'+sessionStorage.getItem("userName")+'/'+sessionStorage.getItem("repoName")+'/branches'
      })
    },
    Back(){
      this.$router.back()
      // window.location.reload()
    },
    CommitText(){
     this.$router.push("/uploadFiles")
    },
    Preview(folder){
      let targetURl =this.$route.path.replace(/tree/,"blob")
      targetURl=targetURl+'/'+folder
      console.log(targetURl)
      request.get(targetURl).then(res =>
      {
        console.log(res)
        this.code=res.data
      })
    },
    getIntroduction(){
      console.log("READING INFO")
      request.post("/repo/info",  {"ownerId":this.ownerName, "repoName":this.repoName}).then(res => {
        console.log(res)
        this.repoIntroduction=res.data.description
      })
    },
      load(){
        request.post("/manager/check",  {"repoName":this.repoName,"managerId":this.userId,"ownerName":this.ownerName}).then(res => {
          console.log(res)
          this.isManager=res.data
        })
        request.get("/"+this.ownerName+"/"+this.repoName+"/releases").then(res => {
          console.log(res)
          this.release=res.data
          this.newRelease=this.release[0]
        })
        request.get(this.$route.path).then(res => {
          console.log(res)
          this.tableData=res.data
        })
        this.getIntroduction()
      },
    DownloadBranch(){
      let repoName=sessionStorage.getItem("repoName")
      let targetURL=this.$route.path.replace(/tree/,"download")
      request.get(targetURL,{
        responseType:'blob'
      }).then(response => {
        console.log(response)
        let blob = new Blob([response], { type: "application/zip;charset-UTF_8" });
        let url = window.URL.createObjectURL(blob);
        const link = document.createElement("a"); // 创建a标签
        link.href = url;
        link.download = repoName+'.zip'; // 重命名文件
        link.click();
        URL.revokeObjectURL(url); // 释放内存
      })
     .catch(function (err){
       console.log(err);
     })
    },
    Next(tableData,isDirectory) {
      if(isDirectory===false){
        this.fileName=tableData
        this.isDirectoryNow=false
        this.Preview(tableData);
      }
      if (isDirectory===true) {
        this.isDirectoryNow=true
        request.get(this.$route.path + '/' + tableData).then(res => {
          console.log(res)
          this.tableData = res.data
        })
        console.log(tableData)
        this.$router.push({
          path: this.$route.path + '/' + tableData
        })
      }
    }
  },
  data(){
    return{
      branchList:[{
        branchName:'',
      }],
      targetbranchName:'',
      repoIntroduction:'',
      fileName:'',
      code:"",
      tableData:[
      ],
      isFile:'',
      isDirectoryNow:true,
      repoName:'',
      ownerName:'',
      releaseTotal:0,
      release:[
      ],
      isManager:false,
      newRelease:'',
      userId:'',
    }
  }
}
</script>

<style >

</style>
